<template>
  <uni-popup ref="popup" type="bottom" :lock-scroll="true" @change="change">
    <view class="popup-main">
      <h3 class="title">
        <image @click="$refs.popup.close()" src="../../../static/order/close.png" mode="aspectFit"></image>
        请选择{{ type }}城市
      </h3>
      <city-select @cityClick="cityClick" :hotelCitys="hotelCitys" :formatName="formatName" :activeCity="activeCity"
                   :hotCity="hotCity" :obtainCitys="obtainCitys" :isSearch="true" ref="citys"
                   placeholder="请输入关键字搜索"></city-select>
    </view>
  </uni-popup>
</template>

<script>
import citySelect from '@/components/city-select/city-select.vue'
import { getTravelCities, getFlyCities, getTrainCities } from '@/api/hotel.js'
import trainCity from './trainCity.js'

export default {
  data () {
    return {
      type: '',
      //需要构建索引参数的名称（注意：传递的对象里面必须要有这个名称的参数）
      formatName: 'name',
      //当前城市
      activeCity: {
        id: 1,
        name: '南京市',
      },
      //热门城市
      hotCity: [
        {
          id: 0,
          name: '南京市',
        },
        {
          id: 1,
          name: '南京市',
        },
      ],
      //显示的城市数据
      obtainCitys: [],
      hotelCitys: {},
    }
  },
  components: {
    citySelect,
  },
  onLoad () {
  },
  methods: {
    change (e) {
      if (e.show) {
        this.$emit('open', true)
      } else {
        this.$emit('open', false)
      }
    },
    async open (type, hotCity) {
      console.log(hotCity)
      this.hotCity=[];
      hotCity.forEach(item=>{
       let ids= item.id.split(",");
        let names=item.name.split(",")
        for(let i=0;i<ids.length;i++){
          this.hotCity.push({
            id:ids[i],
            name:names[i]
          })
        }
      })
      this.type = type
      switch (type) {
        case 'end':
          this.type = '目的'
          break
        case 'start':
          this.type = '出发'
          break
        case 'sleep':
          this.type = '入住'
          break
        case 'flys':
          this.type = '出发'
          break
        case 'flye':
          this.type = '目的'
          break
        default:
          this.type = ''
      }
      if (type == 'sleep') {
        const res = await getTravelCities()
        this.hotelCitys = res
      } else if (type == 'flys' || type == 'flye') {
        const res = await getFlyCities()
        this.hotelCitys = res
      } else {
        const res = await getTrainCities()
        this.hotelCitys = res
      }
      this.$refs.popup.open()

    },
    close () {
      this.$refs.popup.close()
    },
    cityClick (item) {
      this.$emit('citySelect', item)
      this.$refs.popup.close()
    },
  },
}
</script>

<style lang="scss" scoped>
.popup-main {
  width: 100vw;
  height: 90vh;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;

  .title {
    height: 110rpx;
    line-height: 110rpx;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px solid #e5e5e5;
      transform: scaleY(0.5);
    }

    image {
      width: 52rpx;
      height: 52rpx;
      position: absolute;
      left: 24rpx;
      top: 34rpx;
    }
  }
}
</style>